<template>
    <div>
        <!-- 网站品牌 -->
        <!-- <TopLogo/> -->
        <top-logo><span>SkyMusic</span></top-logo>
        <!-- 网站导航 -->
        <tab-nav></tab-nav>
        <!-- 二级路由出口 -->
        <transition :duration="{ enter: 1000, leave: 0 }" name="music">
            <!-- 缓存指定组件的数据（注意嵌套关系） -->
            <!-- <keep-alive include="searchmusic,recmusic"> -->
            <!-- 编辑推荐 -->
            <!-- 最新音乐 -->
            <router-view></router-view>
            <!-- </keep-alive> -->
        </transition>

        <!-- 页面尾部 -->
        <footer-comp></footer-comp>
    </div>
</template>

<script>
// 导入组件
import TopLogo from '@/components/top-logo.vue';
import TabNav from '@/components/tab-nav.vue';
import FooterComp from '@/components/footer-comp.vue';

// 全部导出
export default {
    // 组件名称
    name: 'Home',
    data() {
        return {
            cName: '',
            isDefault: false,
        }
    },
    // 注册组件
    components: {
        TopLogo,
        TabNav,
        FooterComp,
    },
    watch: {

    },
    created() {

    },
    mounted(){
        // 设置网页标题
        document.title="Sky 音乐"
    }
}

</script>

<style lang="scss">
.music-enter {
    transform: translateX(-50%);
    opacity: 0;
}

.music-enter-active {
    transition: all .5s;
}

.music-enter-to {
    transform: translateX(0);
    opacity: 1;
}

.music-leave {
    transform: translateX(0);
    opacity: 1;
}

.music-leave-active {
    transition: all .5s;
}

.music-leave-to {
    transform: translateX(100%);
    opacity: 0;
}
</style>